<template>
  <chart :options="options" :auto-resize="autoResize" :theme="theme" :watch-shallow="watchShallow"
         :class="className" :style="{height:height,width:width}"></chart>
</template>

<script>
  export default {
    props: {
      title: { type: String, default: '' },
      chartData: { type: Object },
      className: { type: String, default: 'chart' },
      theme: { type: String, default: 'macarons' },
      autoResize: { type: Boolean, default: true },
      watchShallow: { type: Boolean, default: true },
      width: { type: String, default: '100%' },
      height: { type: String, default: '250px' }
    },
    data() {
      return {
        options: this.buildOptions(this.chartData)
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.options = this.buildOptions(val)
        }
      }
    },
    mounted() {
      if (!this.options && this.chartData) {
        this.options = this.buildOptions(this.chartData)
      }
    },
    methods: {
      buildOptions(chartData) {
        if (!chartData || !chartData.indicator || !chartData.valueBeans) {
          return
        }

        var indicator = chartData.indicator
        var seriesData = chartData.valueBeans
        seriesData.map(item => {
          item.value = item.data
          item.areaStyle = {
            normal: {
              opacity: 0.4,
              color: '#B8D3E4'
            }
          }
        })

        return {
          tooltip: {},
          radar: {
            name: {
              textStyle: {
                color: '#000',
                borderRadius: 3,
                padding: [3, 5]
              }
            },
            indicator: indicator
          },
          series: [{
            name: 'Cube诊断评分',
            type: 'radar',
            data: seriesData
          }]
        }
      }
    }
  }
</script>
